<template>
    <div>
        <el-container>
            <el-header>
                <div style="margin-top: 10px;">
                    <el-row :gutter="10">
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="6">
                            <div class="grid-content bg-purple">
                            </div>
                        </el-col>
                        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="12">
                            <div class="grid-content bg-purple-content">

                                <ul>
                                    <li @click="toHome">首页</li>

                                </ul>

                                <div style="width: 350px;float: left;line-height: 36px;margin-left: 40px">
                                    <el-input placeholder="请输入内容" v-model="searchContent" @keyup.enter.native="search"
                                              class="input-with-select">
                                        <el-button slot="append" icon="el-icon-search" @click="search">搜索</el-button>
                                    </el-input>
                                </div>
                            </div>
                        </el-col>
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="6">
                            <div class="grid-content bg-purple-light">

                                <ul>
                                    <li @click="toLogin">{{this.nickname===""?"登录":this.nickname}}</li>
                                    <li @click="toRegister">{{this.nickname===""?"注册":""}}</li>
                                    <li @click="toLogout">{{this.nickname!==""?"退出":""}}</li>
                                    <li style="color: red" @click="toMyorder">我的订单</li>
                                </ul>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div style="border-bottom-style: inset;margin-top: 8px"></div>
            </el-header>
            <el-main>

                <div style="width: 100%;height: 400px;">
                    <el-carousel :interval="4000" type="card" height="400px" indicator-position="none">
                        <el-carousel-item v-for="item in 6" :key="item">
                            <h3 class="medium"></h3>
                        </el-carousel-item>
                    </el-carousel>
                </div>

                <div style="color: red;font-size: 25px;margin-left: 20%;font-weight: bold">我的订单</div>

                <div style="background-color: pink ;width: 80%;margin: 10px auto">

                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            :row-class-name="tableRowClassName">

                        <el-table-column
                                label="订单号"
                        >
                            <template slot-scope="scope">{{ scope.row.orderId }}</template>
                        </el-table-column>
                        <el-table-column
                                label="用户ID"
                        >
                            <template slot-scope="scope">{{ scope.row.userId }}</template>
                        </el-table-column>
                        <el-table-column
                                label="名称"
                        >
                            <template slot-scope="scope">{{ scope.row.username }}</template>
                        </el-table-column>

                        <el-table-column
                                label="车次"
                        >
                            <template slot-scope="scope">G{{ scope.row.trainNumber }}</template>
                        </el-table-column>

                        <el-table-column
                                label="出发地"
                        >
                            <template slot-scope="scope">{{ scope.row.startingPoint }}</template>
                        </el-table-column>

                        <el-table-column
                                label="到达地"
                        >
                            <template slot-scope="scope">{{ scope.row.endingPoint }}</template>
                        </el-table-column>

                        <el-table-column
                                label="创建时间">
                            <template slot-scope="scope">{{ scope.row.createTime | filterCtime }}</template>
                        </el-table-column>


                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button plain size="mini" type="success"
                                           @click="rebackOrder(scope.row)">退订
                                </el-button>
                                <el-button plain size="mini" type="success"
                                           @click="changeOrder(scope.row)">改签
                                </el-button>
                            </template>
                        </el-table-column>


                    </el-table>

                </div>


            </el-main>
            <el-footer>

                <div style="height: 60px">
                    <el-row :gutter="10">
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="6">
                            <div class="grid-content footer-content" style="height: 100px">
                                <div style="float: right;margin-right: 5px">
                                    <div style="margin-right: 5px;font-size: 18px;cursor: pointer">
                                        xxx票务有限公司
                                    </div>
                                    <div style="font-size: 10px;margin-top: -20px">经营许可：L-HUN-100213</div>
                                </div>

                            </div>
                        </el-col>
                        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="12">
                            <div class="grid-content ">
                                <div style="height: 100px" class="footer-content">
                                    <ul>
                                        <li>安心服务</li>
                                        <li>放心价格</li>
                                        <li>退改无忧</li>
                                    </ul>
                                </div>

                            </div>
                        </el-col>
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="6">
                            <div class="grid-content footer-content">
                                <div style="height: 100px;line-height: 100px;color: white;font-size: 18px;cursor: pointer">
                <span>
                  <img src="../../assets/img/customer.png" style="width: 35px;height: 35px;margin-top: 30px" alt="">
                </span>
                                    <span @click="doChat">留言</span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-footer>

            <el-dialog
                    title="系统留言"
                    :visible.sync="openChatDialog"
                    width="30%"
                    center>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="内容">
                        <el-input v-model="form.chatContent" placeholder="请输入内容"></el-input>
                    </el-form-item>


                </el-form>
                <span slot="footer" class="dialog-footer">
            <el-button @click="openChatDialog = false">取 消</el-button>
            <el-button type="primary" @click="sendChat">确 定</el-button>
            </span>
            </el-dialog>
        </el-container>
    </div>
</template>

<script>
    import moment from 'moment'
    import {order_list, back_order} from "../../api/order";

    export default {
        data() {
            return {
                tableData: [],
                currentPage: 1,
                searchContent: "",
                pageSize: 10,
                total: 0,
                loading: false,
                nickname: "",
                form: {},
                openChatDialog: false,
                startingPoint: "",
                endingPoint:
                    "",
                ProductActive:
                    "0",
                selectTrainNumberType:
                    "",
                trainNumberType:
                    [{id: 0, title: "请选择"}, {id: 1, title: "高铁"}, {id: 2, title: "动车"}, {
                        id: 3,
                        title: "直达"
                    }, {id: 4, title: "特快"}, {id: 5, title: "快速"}],

            }
                ;
        },

        created() {
            this.orderList();
            this.getUserInfoMessage();
        },

        filters: {
            filterCtime(ctime) {
                // 过滤时间
                if (ctime) {
                    return moment(ctime).format("YYYY-MM-DD HH:mm:ss");
                } else {
                    return '暂无数据'
                }
            },
            filterShow(show) {
                if (show === 1) {
                    return '显示'
                } else {
                    return '不显示'
                }
            }
        },

        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 0) {
                    return 'success-row';
                }
                return '';
            },

            rebackOrder(row) {
                let params = {};
                params.orderId = row.orderId;
                back_order(params).then(res => {
                    if (res.status === 200) {
                        this.$message.success("退订成功");
                        this.orderList();
                    }
                })
            },

            changeOrder() {
                this.$message.success("改签成功")
            },

            changeProduct(event) {
                this.ProductActive = event.target.value; //获取option对应的value值
                //console.log("你选中了", this.ProductActive)

            },

            sendChat() {
                let params = {};
                let userInfo = localStorage.getItem('userInfo');
                let lists = JSON.parse(userInfo);
                if (lists === null) {
                    this.$message.error("暂未登录,不能留言哦");
                    return
                }
                params.fromUserId = lists.userId;
                params.toUserId = 32;
                params.content = this.form.chatContent;
                send_chat(params).then(res => {
                    if (res.status === 200) {
                        this.$message.success("留言成功");
                        this.openChatDialog = false;
                    }
                })
            },

            doChat() {
                this.openChatDialog = true

            },

            toLogout() {
                localStorage.removeItem("userInfo");
                this.$message.success("退出成功");
                location.reload();
            },


            orderTicket(row) {
                let params = {};
                params.ticketId = row.id;
                let userInfo = localStorage.getItem('userInfo');
                let lists = JSON.parse(userInfo);
                if (lists === null) {
                    this.$message.error("暂未登录,不能购买哦");
                    return
                }
                params.userId = lists.userId;

                ticket_order(params).then(res => {
                    if (res.status === 200) {
                        this.$message.success("购买成功");
                        this.ticketList();
                    }
                })

            },

            getUserInfoMessage() {
                let userInfo = localStorage.getItem('userInfo');
                let lists = JSON.parse(userInfo);
                this.nickname = lists.nickname;
            },

            search() {
                this.pageNumber = 1;
                this.ticketList();
            },

            /**
             * 改变每页大小
             */
            handleSizeChange(e) {
                this.pageSize = e;
                this.ticketList();
            },
            /**
             * 改变当前页
             */
            handleCurrentChange(e) {
                this.currentPage = e;
                this.ticketList();
            },

            toLogin() {
                this.$router.push('/login').catch(() => {
                });
            },

            toHome() {
                this.$router.push('/home').catch(() => {
                });
            },

            toMyorder() {
                this.$router.push('/order').catch(() => {
                });
            },

            toRegister() {
                this.$router.push('/register').catch(() => {
                });
            },
            orderList() {
                this.loading = true;
                let params = {};
                let userInfo = localStorage.getItem('userInfo');
                let lists = JSON.parse(userInfo);
                if (lists === null) {
                    this.$message.error("暂未登录,不能查看订单哦");
                    return
                }
                params.userId = lists.userId;
                order_list(params).then(res => {
                    if (res.status === 200) {
                        this.tableData = res.data;
                        this.loading = false;
                    }

                })
            },

        }
    };
</script>

<style lang="less">

    .el-header, .el-footer {
        //background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: white;
        color: #333;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }


    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: white;
    }

    .bg-purple-content {
        background: white;
    }

    .bg-purple-light {
        background: white;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .grid-footer {
        background-color: pink;
    }

    ul li {
        float: left;
        margin-left: 20px;
        line-height: 36px;
    }

    li:hover {
        color: orangered;
        cursor: pointer;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        //background-color: #99a9bf;
        background: url("../../assets/img/banner2.jpg");
    }

    .el-carousel__item:nth-child(2n+1) {
        //background-color: #d3dce6;
        background: url("../../assets/img/banner1.jpg");
    }

    .footer-content {
        background-color: #c4c9cd;
    }

    .footer-content ul li {
        line-height: 100px;
        margin-left: 150px;
        font-size: 30px;
        font-weight: 700;
        color: white;
    }

    .city_recommend ul li:hover {
        background: orangered;
        color: white;
    }
</style>
